<!-- 工作流程状态栏 -->
<template>
  <div class="bpm-status" v-loading="loading">
    <div class="bpm-status-item bg-#fc5c53" @click="$router.push('/bpm/task/todo')">
      <div class="bpm-status-count"><CountTo :startVal="0" :endVal="reportData.todoCount" /></div>
      <div class="bpm-status-title">待办</div>
      <Icon class="bpm-status-icon" icon="svg-icon:daibansvg" :size="72" />
    </div>
    <div class="bpm-status-item bg-#47D147" @click="$router.push('/bpm/task/done')">
      <div class="bpm-status-count"><CountTo :startVal="0" :endVal="reportData.doneCount" /></div>
      <div class="bpm-status-title">已办</div>
      <Icon class="bpm-status-icon" icon="svg-icon:yiban" :size="72" />
    </div>
    <div class="bpm-status-item bg-#FAAF23" @click="$router.push('bpm/task/my')">
      <div class="bpm-status-count"><CountTo :startVal="0" :endVal="reportData.sendCount" /></div>
      <div class="bpm-status-title">已发</div>
      <Icon class="bpm-status-icon" icon="svg-icon:daiyue" :size="72" />
    </div>
    <div class="bpm-status-item bg-#5486F0" @click="$router.push('/bpm/task/copy')">
      <div class="bpm-status-count"><CountTo :startVal="0" :endVal="reportData.copyCount" /></div>
      <div class="bpm-status-title">抄送</div>
      <Icon class="bpm-status-icon" icon="svg-icon:yiyue" :size="72" />
    </div>
    <div class="bpm-status-item !w248px bg-#C763F2" @click="$router.push('/bpm/task/create')">
      <div class="bpm-status-title">发起流程</div>
      <Icon class="bpm-status-icon" icon="svg-icon:faqi" :size="55" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getBpmReport } from '@/api/bpm/report'
const reportData: any = ref({})
const loading = ref(false)
const getReportData = async () => {
  loading.value = true
  try {
    reportData.value = await getBpmReport()
    loading.value = false
  } catch (err) {
    console.log(err)
  }
}
getReportData()
</script>

<style lang="scss" scoped>
.bpm-status {
  display: flex;
  color: #fff;
  gap: 24px;

  .bpm-status-item {
    position: relative;
    width: 316px;
    height: 168px;
    cursor: pointer;
    border-radius: 16px;
    opacity: 1;
  }

  .bpm-status-count {
    position: absolute;
    top: 7px;
    left: 24px;
    font-size: 48px;
    font-weight: 700;
    line-height: 69.5px;
    letter-spacing: 0;
  }

  .bpm-status-title {
    position: absolute;
    top: 69px;
    left: 24px;
    font-size: 18px;
    font-weight: 500;
    line-height: 28.96px;
    letter-spacing: 0;
  }

  .bpm-status-icon {
    position: absolute;
    top: 48px;
    right: 48px;
    font-size: 48px;
  }
}
</style>
